<!--
 * @Author: xudajie
 * @Date: 2021-08-23 10:23:41
 * @LastEditTime: 2021-11-17 16:11:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \fd-analysis-industry-map\src\components\draw\drawtool.vue
-->
<template>
  <div class="draw_until">
    <div class="left_tool">
      <div>
        <Tooltip content="创建节点" placement="bottom">
          <p class="tools" @mousedown="startDrag('Node', $event)">
            <img src="static/img/node.png" alt="" />
          </p>
        </Tooltip>
      </div>
      <p class="lines"></p>
      <div>
        <Tooltip content="上一步" placement="bottom">
          <p class="tools" @click="doGraph(0)">
            <Icon type="ios-undo" size="22" :color="graph && canUndo ? '#888888' : '#cecece'" />
          </p>
        </Tooltip>
        <Tooltip content="下一步" placement="bottom" style="margin-left: 32px">
          <p class="tools" @click="doGraph(1)">
            <Icon type="md-share-alt" size="22" :color="graph && canRedo ? '#888888' : '#cecece'" />
          </p>
        </Tooltip>
      </div>
    </div>

    <div class="center_tool">
      <span class="add_icon" @click="scaleEvent(false)">-</span>
      <span class="nums">{{ scale }}%</span>
      <span class="add_icon" @click="scaleEvent(true)">+</span>
    </div>

    <div class="right_tool">
      <Tooltip v-show="!$route.query.isMap" content="导出画布" placement="bottom">
        <p class="tools" @click="exportPng" @mouseenter="show2 = false" @mouseleave="show2 = true">
          <img :src="show2 ? 'static/img/export.png' : 'static/img/export1.png'" alt="" />
        </p>
      </Tooltip>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import { DataUri } from '@antv/x6'
import bus from './utils/bus'
import { startDragToGraph } from './utils/methods'

export default {
  data() {
    return {
      scale: 100,
      graph: '',
      canUndo: false,
      canRedo: false,
      show2: true
    }
  },
  mounted() {
    // 监听画布的渲染
    bus.$on('graphListen', (val) => {
      this.graph = val
    })
    bus.$on('canDo', (val) => {
      this.canUndo = val.canUndo
      this.canRedo = val.canRedo
    })
    bus.$on('mapInfo', (val) => {
      this.mapInfo = val
    })
  },
  beforeDestroy() {
    bus.$off('graphListen')
    bus.$off('canDo')
    bus.$off('mapInfo')
  },

  computed: {},
  methods: {
    startDrag(type, e) {
      if (this.graph) {
        startDragToGraph(this.graph, type, e)
      } else {
        bus.$emit('drawView', true)
      }
    },
    // 放大缩小
    scaleEvent(status) {
      if (!this.graph) return
      if (status) {
        this.graph.zoom(0.1)
        this.scale += 10
      } else {
        if (this.scale === 10) return
        this.graph.zoom(-0.1)
        this.scale -= 10
      }
      // this.graph.centerContent(); // 画布居中
    },
    doGraph(status) {
      if (!status) {
        this.graph.history.undo()
      } else {
        this.graph.history.redo()
      }
    },
    // 存草稿
    saveDraft() {
      this.$emit('saveDraft')
    },
    checkMap() {
      console.log(this.graph.toJSON())
      this.$emit('checkMap')
    },
    save() {
      this.graph.getSelectedCells().forEach((cell) => {
        if (cell.isNode()) {
          // 取消选中节点
          cell.attr('body/stroke', '#D8D8D8')
        }
      })
      this.$emit('save')
    },

    exportPng() {
      this.graph.getSelectedCells().forEach((cell) => {
        if (cell.isNode()) {
          // 取消选中节点
          cell.attr('body/stroke', '#D8D8D8')
        }
      })
      this.graph.toPNG(
        (dataUri) => {
          // 下载
          DataUri.downloadDataUri(dataUri, `${this.mapInfo.mapName}.png`)
        },
        {
          backgroundColor: 'white',
          padding: {
            top: 50,
            right: 50,
            bottom: 50,
            left: 50
          },
          quality: 1,
          copyStyles: false
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
.draw_until {
  height: 48px;
  background: #fafafa;
  box-shadow: 0px 2px 4px 0px rgba(187, 187, 187, 0.16);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tools {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #333333;
    font-size: 14px;
    img {
      width: 16px;
      height: 16px;
      margin-bottom: 4px;
    }
  }
  .lines {
    width: 1px;
    height: 16px;
    border: 1px solid #e6e6e6;
    margin: 0 32px;
  }
  .left_tool {
    display: flex;
    align-items: center;
  }
  .center_tool {
    display: flex;
    align-items: center;
    .add_icon {
      width: 18px;
      height: 18px;
      background: #ececec;
      border-radius: 50%;
      color: #979797;
      cursor: pointer;
      text-align: center;
      line-height: 16px;
      font-weight: 700;
    }
    .nums {
      margin: 0 8px;
    }
  }
  .right_tool {
    display: flex;
    align-items: center;
  }
}
</style>
